<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add Music</title>
    <script src="../static/js/jquery-3.7.1.min.js"></script>
    <script src="../static/js/jquery.cookie.min.js"></script>
    <script src="../static/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
    <style>
        .form-floating {
            margin-top: 20px;
        }
    </style>
</head>
<body style="background: #F1F3F5;">
<nav class="navbar navbar-expand-sm bg-dark justify-content-between">
    <a class="navbar-brand ms-2" onclick="location.href='./index.html'">Music Online</a>
    <form class="d-flex">
        <label><input class="form-control" type="text" placeholder="Search"></label>
        <button class="btn btn-primary ms-2" type="button">Search</button>
    </form>
    <div class="btn-group btn-group-sm me-3 text-center">
        <img src="../static/img/avatar.jpg" style="width: 30px; height: 30px; cursor:pointer;"
             class="rounded-circle m-1 user-avatar" alt="avatar" onclick="location.href='./userDetails.html'"/>
        <button type="button" id="userid" class="btn btn-primary btn-dark userid">USERID</button>
        <button type="button" id="log-out" class="btn btn-primary btn-dark">Log out</button>
    </div>
</nav>

<div class="container-fluid align-content-center justify-content-center d-flex vh-100">
    <div class="d-flex flex-column m-5">
        <label class="form-label mb-3">Music's Cover:</label>
        <img src="../static/img/ad-trance.jpg" style="width: 150px; height: 150px; cursor: pointer; background:#EEE;"
             class="rounded-3" alt="cover">
    </div>

    <div style="height: 75vh; width: 2px; border-left: 1px solid #999999; float: left; margin-top: 10px; margin-right: 30px"></div>

    <form id="music">
        <div class="form-floating">
            <input id="name" class="form-control" placeholder=" " type="text" name="musicName" required>
            <label for="name">Music Name</label>
        </div>

        <div class="form-floating">
            <input id="author" class="form-control" placeholder=" " type="text" name="musicAuthor" required>
            <label for="author">Music's Author</label>
        </div>

        <div class="form-floating">
            <textarea id="intro" class="form-control" placeholder=" " name="musicIntro" cols="40"></textarea>
            <label for="intro">Music's intro</label>
        </div>

        <div class="form-floating">
            <input id="issuingDate" class="form-control col me-3" placeholder=" " name="issuingDate" type="date"
                   required>
            <label for="issuingDate">Music's Issuing Date</label>
        </div>

        <label for="price" class="form-label m-2">Music's Price</label>
        <div class="input-group m-1">
            <span class="input-group-text">￥</span>
            <input id="price" class="form-control col" placeholder=" " name="price" type="number" min="0" required>
        </div>

        <button id="submit" type="button" class="btn btn-primary text-center mt-4">Confirm</button>
        <button id="back" type="button" class="btn btn-warning text-center mt-4 ms-2"
                onclick="location.href='userDetails.html'">Back
        </button>
        <button id="delete" type="button" class="btn btn-danger text-center mt-4 ms-2" data-bs-target="#del-confirm"
                style="display: none">
            Delete this
        </button>
    </form>
</div>

<div class="modal" id="del-confirm">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h4>Delete this music</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <p>Are you sure to delete this music?</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button id="modal-confirm" type="button" class="btn btn-danger" data-bs-dismiss="modal">Confirm</button>
            </div>
        </div>
    </div>
</div>

<script>
    let server = "http://localhost:8010";

    let url = window.location.href;
    param = url.slice(url.indexOf('?') + 1);
    vinylID = param.split('=')[1];

    let token = $.cookie('token');

    if (token !== undefined) {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: server + "/user/userInfo",
            headers: {
                'Authorization': token,
            },
            success: function (userData) {
                console.log(userData);
                if (userData != null) {
                    $(".navbar img").attr("src", userData.data.avatarUrl);
                    $("#userid").html(userData.data.nickName);
                }
            },
            error: function () {
                console.log("something wrong.")
            }
        })
    }

    $("#submit").click(function () {
        console.log("music update");
        $.ajax({
            type: "POST",
            dataType: "json",
            url: server + "/music/add",
            data: $("#music").serialize(),
            headers: {
                'Authorization': token,
            },
            success: function (result) {
                if (result.code === 200) {
                    location.href = "./userDetails.html";
                } else {
                    console.log(result.message);
                    alert(result.message);
                }
            },
            error: function () {
                console.log("update music failed");
                alert("Add or Update music Failed");
            }
        })
    })

    $("#log-out").click(function () {
        $.removeCookie('token');
        console.log("User log out.");
        alert("You have been log out.");
        location.href = "./index.html";
    })

    if (vinylID !== undefined) {
        $("#delete").show();

        $("#modal-confirm").click(function () {
            console.log("delete music id:" + vinylID);
            $.ajax({
                type: "POST",
                dataType: "json",
                url: server + "/music/del",
                headers: {
                    'Authorization': $.cookie('token'),
                },
                data: {
                    'vinylId': vinylID,
                },
                success: function (result) {
                    if (result.code === 200) {
                        location.reload();
                    } else {
                        console.log(result.message);
                        alert(result.message);
                    }
                },
                error: function () {
                    console.log("delete music failed");
                    alert("Delete Music Failed");
                }
            })
        })

        $.ajax({
            type: "POST",
            dataType: "json",
            url: server + "/music/info",
            data: {
                'vinylId': vinylID,
            },
            headers: {
                'Authorization': $.cookie('token'),
            },
            success: function (vinyl) {
                if (vinyl.code === 200) {
                    $("#name").val(vinyl.data.musicName);
                    $("#author").val(vinyl.data.musicAuthor);
                    $("#intro").val(vinyl.data.musicIntro);
                    $("#issuingDate").val(vinyl.data.issuingDate);
                    $("#price").val(vinyl.data.musicPrice);
                    $("#cover").attr("src", vinyl.data.musicCover);
                    $("#delete").show();
                }
            }
        })
    }
</script>
</body>
</html>